<template>
  <div style="width:450px;height:300px" ref="chart"></div>
</template>

<script>
// 设备状态视图*******
import * as echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          graphic: {
            //图形中间文字
            type: "text",
            left: "center",
            top: "center",
            style: {
              text: "55",
              textAlign: "center",
              fill: "#fff",
              fontSize: 60
            }
          }
        },
        series: [
          // 1
          {
            type: "pie",
            radius: [33, 25],
            center: ["21%", "35%"],
            roseType: "radius",
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold"
              }
            },
            // 中间文字显示
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: function(argument) {
                  var html;
                  html = "12";
                  return html;
                },
                textStyle: {
                  fontSize: 15,
                  color: "#39CCCC"
                }
              }
            },
            labelLine: {
              show: true
            },
            data: [
              {
                value: 435,
                itemStyle: {
                  color: "#0cbd8e"
                }
              },
              {
                value: 300,
                itemStyle: {
                  color: "#282a9c"
                }
              }
            ]
          },
          // 2
          {
            type: "pie",
            radius: [33, 25],
            center: ["38%", "35%"],
            roseType: "radius",
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              
              }
            },
            // 中间文字显示
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: function(argument) {
                  var html;
                  html = "1";
                  return html;
                },
                textStyle: {
                  fontSize: 15,
                  color: "#6699bf"
                }
              }
            },
            labelLine: {
              show: true
            },
            hoverOffset: 0,
            data: [
              {
                value: 235,
                itemStyle: {
                  color: "#27299b"
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: "#4167dc"
                }
              }
            ]
          },
          // 3
          {
            type: "pie",
            radius: [33, 25],
            center: ["55%", "35%"],
            roseType: "radius",
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold"
              }
            },
            // 中间文字显示
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: function(argument) {
                  var html;
                  html = "12";
                  return html;
                },
                textStyle: {
                  fontSize: 15,
                  color: "#39CCCC"
                }
              }
            },
            labelLine: {
              show: true
            },
            hoverOffset: 0,
            data: [
              {
                value: 835,
                itemStyle: {
                  color: "#0cbd8e"
                }
              },
              {
                value: 800,
                itemStyle: {
                  color: "#282a9c"
                }
              }
            ]
          },
          // 4
          {
            type: "pie",
            radius: [33, 25],
            center: ["73%", "35%"],
            roseType: "radius",
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold"
              }
            },
            // 中间文字显示
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: function(argument) {
                  var html;
                  html = "12";
                  return html;
                },
                textStyle: {
                  fontSize: 15,
                  color: "#39CCCC"
                }
              }
            },
            labelLine: {
              show: true
            },
            hoverOffset: 0,
            data: [
              {
                value: 435,
                name: "1",
                itemStyle: {
                  color: "#f3645f"
                }
              },
              {
                value: 300,
                itemStyle: {
                  color: "#282a9c"
                }
              }
            ]
          },
          // 5
          {
            type: "pie",
            radius: [33, 25],
            center: ["89%", "35%"],
            roseType: "radius",
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold"
              }
            },
            // 中间文字显示
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: function(argument) {
                  var html;
                  html = "12";
                  return html;
                },
                textStyle: {
                  fontSize: 15,
                  color: "#39CCCC"
                }
              }
            },
            labelLine: {
              show: true
            },
            hoverOffset: 0,
            data: [
              {
                value: 300,
                itemStyle: {
                  color: "#282a9c"
                }
              }
            ]
          }
        ]
      }); 
    }
  }
};
</script>

<style>
</style>